<template>
  <div class="order">
    <vue-header title="我的订单" :left-options="{backText: ''}">
    </vue-header>
    <div style="height: calc(100vh - (46px + 1.3333rem);position: relative;">
      <loading :isShow="showLoading"></loading>
      <scroller lock-x scrollbar-y use-pullup use-pulldown height="100%" @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" v-model="status" ref="scroller">
        <div class="order-list">
          <div class="order-items" v-for="item in items">
            <div class="order-items-order-status">
              <span>{{item.statusDes}}</span>
            </div>
            <orderContent v-bind:data="item" v-bind:scroll="$refs.scroller"></orderContent>
          </div>
        </div>
        <!--pulldown slot-->
        <div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 60px; line-height: 60px; top: -60px; text-align: center;">
          <span v-show="status.pulldownStatus === 'default'"></span>
          <span class="pulldown-arrow" v-show="status.pulldownStatus === 'down' || status.pulldownStatus === 'up'" :class="{'rotate': status.pulldownStatus === 'up'}">↓</span>
          <span v-show="status.pulldownStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
        </div>
        <!--pullup slot-->
        <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
          <span v-show="status.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">↑</span>
          <span v-show="status.pullupStatus === 'loading'">
            <spinner type="ios-small"></spinner>
          </span>
          <div v-show="status.pullupStatus != 'loading'&&status.pullupStatus != 'default'">
            <load-more :show-loading="false" :tip="'我是底线'" background-color="#fbf9fe"></load-more>
          </div>
        </div>
      </scroller>
    </div>
    <div class="order-footer">
      下载云优特APP查看完整订单
    </div>
  </div>
</template>
<script>
import vueHeader from "@/components/vue-header/index";
import { LoadMore, Spinner } from "vux";
import orderContent from "./orderContent";
import Scroller from "@/components/scroller";
import { orderList } from "@/api/order";
import { token_expires } from "@/utils/Keyword";
import loading from "@/components/loading";
export default {
  name: "order",
  components: {
    vueHeader,
    orderContent,
    Scroller,
    LoadMore,
    Spinner,
    loading
  },
  data() {
    return {
      showLoading: false,
      items: [],
      status: {
        pullupStatus: "default",
        pulldownStatus: "default"
      },
      getParams: {
        maxOrMinId: 0,
        size: 10,
        status: 4
      }
    };
  },
  mounted() {
    if (this.$route.query.status||this.$route.query.status==0) {
      this.getParams.status = this.$route.query.status;
    }

    this.init();
  },
  methods: {
    init() {
      this.showLoading = true;
      let _this = this;
      setTimeout(() => {
        _this.getOrderList();
      }, 600);
    },
    getOrderList(el) {
      orderList(this.getParams).then(res => {
        this.$refs.scroller.donePulldown();
        if (res == token_expires) {
          this.getOrderList();
        } else {
          if (el == "refresh") {
            this.items = [];
          }
          this.showLoading = false;
          this.items = this.items.concat(res.order);
          this.$refs.scroller.donePullup();
          if (res.order.length < 10) {
            this.$refs.scroller.disablePullup();
          }
        }
      });
    },
    refresh() {
      this.getOrderList("refresh");
    },
    loadMore() {
      if (this.items.length > 0) {
        this.getParams.maxOrMinId = this.items[this.items.length - 1].id;
      }
      this.getOrderList("loadMore");
    },
    goPage(id) {
      this.navigation_push("orderDetail", { id: id });
      //this.$router.push({ path: "/orderDetail", query: { id: id } });
    }
  }
};
</script>
<style lang="scss" >
.order {
  background-color: #f0f0f0;
  height: 100%;
  .sorrll {
    height: calc(100% - 46px) !important;
    background-color: #f0f0f0;
  }
  .order-list {
    padding-bottom: 0.333rem;
    .order-items {
      margin: 0.2133rem 0.32rem;
      background-color: white;
      border-radius: 0.08rem;
      .order-items-order-status {
        padding: 0.24rem 0 0.28rem 0.2133rem;
        font-size: 0.3467rem;
        color: #f30901;
      }
    }
  }
  .order-footer {
    height: 1.3333rem;
    background: linear-gradient(
      90deg,
      rgba(242, 3, 0, 1),
      rgba(254, 78, 19, 1)
    );
    color: rgba(255, 255, 255, 1);
    font-size: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 100;
    bottom: 0px;
    width: 100%;
  }
  ._v-container > ._v-content {
    // padding-bottom: 20px;
  }
}
</style>
